<template>
  <div>
    <el-card>
      <search-form
        v-model="formOption.data"
        :form-option="formOption"
        :show-btn="true"
        :btn-list="btnList"
        :show-arrow="true"
        label-width="90px"
      />
    </el-card>
    <el-card class="mt-20">
      <page-table :loading="loading" :data="dataSource" :columns="columns" />
      <pagination
        v-show="total > 0"
        :total="total"
        :pageNo.sync="listQuery.pageNo"
        :pageSize.sync="listQuery.pageSize"
        @pagination="handleList"
      />
    </el-card>
  </div>
</template>

<script>
import { EXPORT_MODULE } from '@/enum/setting'
export default {
  name: 'emailSet',
  data() {
    return {
      formOption: {
        data: {
          type: ''
        },
        items: [
          {
            type: 'input',
            label: '邮箱地址',
            placeholder: '请输入邮箱地址',
            value: 'email',
            style: 'width: 210px'
          },
          {
            type: 'select',
            label: '导出模块',
            value: 'type',
            load: true,
            selectList: EXPORT_MODULE
          }
        ]
      },
      btnList: [
        {
          type: 'primary',
          label: '筛选',
          onClick: () => {
            this.listQuery.pageNo = 1
            this.handleList()
          }
        },
        {
          label: '重置',
          onClick: () => {
            this.formOption.data = { type: '' }
            this.listQuery.pageNo = 1
            this.handleList()
          }
        }
      ],
      loading: false,
      dataSource: [],
      total: 0,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      }
    }
  },
  computed: {
    dictFormat() {
      return val => {
        const obj = EXPORT_MODULE.find(item => item.value === val) || {}
        return obj.label || val
      }
    },
    EXPORT_MODULE() {
      return EXPORT_MODULE
    },
    columns() {
      return [
        {
          prop: 'email',
          label: '邮箱地址'
        },
        {
          prop: 'types',
          label: '导出模块',
          render: (h, { row }) => {
            return (
              <div>
                {row.types.map((item, index) => {
                  return (
                    <span>
                      {this.dictFormat(item)}
                      {index < row.types.length - 1 ? '，' : ''}
                    </span>
                  )
                })}
              </div>
            )
          }
        },
        {
          prop: 'createdTime',
          label: '创建时间'
        },
        {
          prop: 'remark',
          label: '备注'
        },
        {
          label: '操作',
          render: (h, { row }) => {
            return (
              <div>
                <el-button type="text" onClick={() => this.handleEdit(row)}>
                  编辑
                </el-button>
                <el-button type="text" onClick={() => this.handleDelete(row)}>
                  删除
                </el-button>
              </div>
            )
          }
        }
      ]
    }
  },
  activated() {
    this.handleList()
  },
  created() {
    this.handleList()
  },
  methods: {
    //获取列表
    async handleList() {
      const params = {
        ...this.listQuery
      }
      const { email, type } = this.formOption.data
      if (email) params.email = email
      if (type) params.type = type
      const { data, status } = await this.$http.system.message.getEmailList({ params })
      if (status === 200) {
        this.dataSource = data.records
        this.total = data.total
      }
    },

    //编辑邮箱
    handleEdit(row) {
      this.$router.push({
        path: '/setting/basic-set/edit-email',
        query: { type: 'edit', id: row.id }
      })
    },

    //删除
    handleDelete(row) {
      this.$handleConfirm({ message: '确认删除吗？' }).then(async () => {
        const { status, msg } = await this.$http.system.message.deleteEmail(row.id)
        if (status == 200) {
          this.$message.success('已删除')
          if (this.dataSource.length == 1 && this.listQuery.pageNo > 1) {
            this.listQuery.pageNo--
          }
          this.handleList()
        } else {
          this.$message.error(msg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
